<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-04-17 16:34:18
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-04-18 19:15:33
 * @FilePath: \vue-project\src\views\home\components\HomeBrand.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import HomeButton from './HomeButton.vue';
import { getImg } from '@/utils/index.js'
import { ref } from 'vue'
var conListData = ref([
    {
        title: '橙营销1',
        text: '营销助力品牌升级1',
        liClassName: 'list-marketing',
        imgName: 'cyx.png'
    },
    {
        title: '橙营销2',
        text: '营销助力品牌升级2',
        liClassName: 'list-integral',
        imgName: 'cyx.png'
    },
    {
        title: '橙营销3',
        text: '营销助力品牌升级3',
        liClassName: 'list-financial',
        imgName: 'cyx.png'
    },
    {
        title: '橙营销4',
        text: '营销助力品牌升级4',
        liClassName: 'list-welfare',
        imgName: 'cyx.png'
    }
])
const className = ref(['is-show'])
</script>

<template>
    <div class="home-main">
        <div class="home-main_brand">
            <div class="brand-title">
                <img src="@/assets/img/title-brand.png" alt="">
            </div>
            <div class="brand-container">
                <ul>
                    <li v-for="item in conListData" :key="item.imgName" :class="item.liClassName">
                        <div class="mask">
                            <img :src="getImg(item.imgName)" alt="" width="90px" height="90px">
                            <h3 class="title">{{ item.title }}</h3>
                            <p class="introduce">{{ item.text }}</p>
                            <HomeButton class="a" :className="className">了解更多</HomeButton>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.home-main {
    padding-top: 240px;
    padding-bottom: 140px;
}

.home-main_brand {
    margin: auto;
    width: 1160px;

    .brand-title {
        display: flex;
        justify-content: center;
        padding-bottom: 66px;
    }

    .brand-container {

        ul {
            display: flex;
            justify-content: space-between;
        }

        ul>li {
            height: 400px;
            width: 280px;
            box-sizing: border-box;
            transition: .3s;
            position: relative;

            &:hover {
                transform: scale(1.1);
                padding: 8px;

                .mask {
                    background-color: transparent;
                    border: 1px solid white;
                }

                .is-show {
                    display: flex;
                }

                .is-position {
                    position: absolute;
                    top: 323px;
                }
            }

            .mask {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: white;
                background-color: rgba(0, 0, 0, .3);

                h3 {
                    padding-top: 38px;
                    padding-bottom: 13px;
                    font-size: 28px;
                    line-height: 28px;
                }

                p {
                    font-size: 16px;
                    line-height: 16px;
                    color: #dadada;
                }


            }



            &.list-marketing {
                background: url('@/assets/img/integral.jpg');
            }

            &.list-integral {
                background: url('@/assets/img/integral.jpg');
            }

            &.list-financial {
                background: url('@/assets/img/integral.jpg');
            }

            &.list-welfare {
                background: url('@/assets/img/integral.jpg');
            }

        }
    }
}
</style>